<template>
  <div id="tgtSearch" class="con-box">
    <v-header title="埋点页面查询" :showDownloadBtn="false" :saveShow="false"></v-header>
    <div class="container_wrap">
      <el-container>
      <el-header height="50px">
        <span class="conditionquery">
            <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                      clearable></el-input>
            <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
          </span>
      </el-header>
      <el-main>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          v-loading="tableLoading"
          style="width: 100%">
          <el-table-column
            prop="url"
            label="匹配规则">
          </el-table-column>
            <el-table-column
                prop="mode"
                label="匹配模式">
            </el-table-column>
            <el-table-column
                prop="origin"
                label="请求来源">
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, prev, pager, next"
          :total="totalCount">
        </el-pagination>
      </el-main>
    </el-container>
    </div>
  </div>
</template>
<script>
  import './../../query/common/query.styl'
  import { mixinParameterManager } from '../../../../assets/js/mixins'
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'
  export default{
    mixins: [mixinParameterManager],
    components: {
      VHeader
    },
    data () {
      return {
        tableLoading: true, // 表格Loading
        tableData: [], // 表格
        totalCount: 10, // 默认数据总数
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        condition: '' // 输入条件
      }
    },
    methods: {
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_BAPAGE_BURIED_LISTFORPAGE, data).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      }
    }
  }
</script>
